<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>待办事宜</span>
            </div>
        </template>
        <ul class="list-items">
            <li class="list-item" v-for="(item,index) in list" :key="index">
                <router-link :to="item.controller+(item.tag?'?tag='+item.tag:'')" class="el-link el-link--default">
                    <img src="/tips.gif" alt="tips" style="width: 1rem;height: 1rem"/>
                    {{ item.info }}
                </router-link>
            </li>
        </ul>
    </el-card>
</template>

<script setup>

import {getToListApi} from "@/api/Dashboard/TodoList.js";

const list = ref([])

const getList = async () => {
    const res = await getToListApi();
    list.value = res.data;
}

onMounted(() => getList())
</script>

<style scoped lang="scss">
.list-items {
    margin: 0;
    padding: 0;
    list-style: none;

    .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

:deep(.el-card__header){
    padding: 5px 10px 5px !important;
    min-height: auto;
    font-size: 14px;
}
</style>